﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title><?php echo $config_site_titletag ?></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
<meta name="description" content="<?php echo $config_site_metadescription ?>">
<meta name="keyword" content="<?php echo $config_site_metakeyword ?>">
<link href="<?php echo $favicon ?>" rel="SHORTCUT ICON" />
<link href='http://fonts.googleapis.com/css?family=Magra' rel='stylesheet' type='text/css'>
<link href="<?php echo $cfg_app_url ?>/template/<? echo $config_site_templatefolder?>/css/basic/basic.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $cfg_app_url ?>/template/<? echo $config_site_templatefolder?>/css/menu/engine.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $cfg_app_url ?>/template/<? echo $config_site_templatefolder?>/css/menu/theme.css" rel="stylesheet" type="text/css" />

<!--==============================slider utama=============================================-->
<link rel="stylesheet" href="<?php echo $cfg_app_url ?>/template/<?php echo $config_site_templatefolder?>/js/nivo-slider.css" type="text/css" />
<script type="text/javascript" src="<?php echo $cfg_app_url ?>/js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<?php echo $cfg_app_url ?>/template/<?php echo $config_site_templatefolder?>/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="<?php echo $cfg_app_url ?>/template/<?php echo $config_site_templatefolder?>/js/nivoslider.js"></script>
<!--===============================akhir slider=============================================-->

<script type="text/javascript" src="<?php echo $cfg_app_url ?>/js/jquery/jquery.easing.1.3.js"></script>
<!--[if lt IE 7]>
<script type="text/javascript" src="template/<?=$config_site_templatefolder?>/css/menu/jquery.dropdown.js"></script>
<![endif]-->
<script type="text/javascript" src="<?php echo $cfg_app_url ?>/js/cycle/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="<?php echo $cfg_app_url ?>/js/sexylightbox/sexylightbox.v2.3.jquery.min.js"></script>
<link rel="stylesheet" href="<?php echo $cfg_app_url ?>/js/sexylightbox/sexylightbox.css" type="text/css" media="screen" />
<script type="text/javascript">
$(window).load( function() {
	counter = [];
	counterTotal = 0;
	var backgroundWidth = 960; /*Default width dari gambar backgorund*/
	var ratio = 1; /*Ratio Image Kelihatan (1:(1+ratio))*/
	var animationTime = 750; /*Waktu animasi dalam milisecond*/
	
	function retrieveAllAnimatedElements(elem)
	{
		var animatedElements = elem.children();
		var cumulativeHeight = 0;
		var defaultHeight = 0;
		
		for(i=0;i<animatedElements.length;i++)
		{
			var elementClass = animatedElements[i].getAttribute("class");
			if(elementClass=="background")
			{
				defaultHeight = animatedElements[i].clientHeight;
				break;
			}
		}
		
		for(i=0;i<animatedElements.length;i++)
		{
			var elementClass = animatedElements[i].getAttribute("class");
			var elementStyle = animatedElements[i].getAttribute("style");
			var newElementStyle = "";
			var elementCurrentHeight = 0;
			var elementCurrentWidth = 0;
			
			if(elementStyle!=null)
			{
				var strStyle = elementStyle.split(";");
				var elementAnimatedFrom = "";
				for(iter=0;iter<strStyle.length;iter++)
				{
					var strTmp = strStyle[iter].split(": ");
					if(strTmp[0].indexOf("animatedfrom") != -1) elementAnimatedFrom = strTmp[1];
				}
			}
			
			if(elementClass=="background")
			{
				//Jika kelas background, left bernilai 0px dan background selalu ada di belakang, maka dari itu z-index:-1
				elementCurrentHeight = animatedElements[i].clientHeight;
				newElementStyle = elementStyle + "left:0px" + "top:" + -(cumulativeHeight) + "px; z-index:-1;";
			}
			else
			{
				newElementStyle = "height:" + defaultHeight + "px; width: auto;";
				animatedElements[i].setAttribute("style", newElementStyle);
				elementCurrentHeight = animatedElements[i].clientHeight;
				elementCurrentWidth = animatedElements[i].clientWidth;
				
				//Jika tidak kelas background maka left digeser di kiri background atau di kanan background sesuai dia diset ternaimasi dari mana
				if(elementAnimatedFrom=="left")
					newElementStyle += (elementStyle==null ? "":elementStyle) + "left:" + -(elementCurrentWidth) + "px;";
				else
					newElementStyle += (elementStyle==null ? "":elementStyle) + "left:" + backgroundWidth + "px;";
				newElementStyle += "top:" + -(cumulativeHeight) + "px;";
			}
			//Mengeset properti css sesuai dengan perhitungan di atas, dibedakan apakah background atau tidak
			animatedElements[i].setAttribute("style", newElementStyle);
			//Tiap image disusun secara block, makanya properti css top diset sesuai jumlah height dari semua image yang ada di atasnya
			$(animatedElements[i]).css("display", "block");
			//Properti dari position diset relatif sehingga tiap gambar yang teranimasi posisinya mengikuti div animasi
			$(animatedElements[i]).css("position", "relative");
			cumulativeHeight += elementCurrentHeight;
		}
	}
	
	function animateOnSeen(elem, index)
	{
		upBound = $(window).scrollTop();
		bottomBound = $(window).height() + $(window).scrollTop();
		imgPos = $(elem).offset().top;
	
		if(ratio*(bottomBound-imgPos) > imgPos-upBound)
		{
			var animatedElements = elem.children();
			var cumulativeWidth = 0;
			
			for(i=0;i<animatedElements.length;i++)
			{
				if(animatedElements[i].getAttribute("class")=="background") 
					continue;
				$(animatedElements[i]).animate({left:cumulativeWidth}, animationTime);
				cumulativeWidth += animatedElements[i].clientWidth;
			}
			counter[index] = 1;
			counterTotal++;
		}
	}
	
	animationClass = $('.animasi').toArray();
	for(j=0;j<animationClass.length;j++)
	{
		//properti max-height tiap div dengan kelas animasi diset sesuai height background agar tidak terlalu panjang
		var thisChildren = animationClass[j].childNodes;
		var maxheight;
		for(k=0;k<thisChildren.length;k++)
		{
			if(thisChildren[k].tagName=="IMG")
				if(thisChildren[k].getAttribute("class")=="background")
					maxheight = thisChildren[k].clientHeight;
		}
		$(animationClass[j]).css("max-height",maxheight+"px");
		//properti overflow tiap div diset hidden agar gambar yang teranimasi dari kiri / kanan tidak terlihat
		$(animationClass[j]).css("overflow","hidden");
		
		//counter untuk tiap bagian animasi
		counter.push(0);
		//mengatur properti tiap elemen yang teranimasi pada tiap div
		retrieveAllAnimatedElements($(animationClass[j]));
		//menghandle jika animasi langsung terlihat 
		animateOnSeen($(animationClass[j]), j);
	}

	window.addEventListener('scroll', 
							function()
							{
								for(j=0;j<animationClass.length;j++)
								{
									if(counter[j]==0)
									{
										animateOnSeen($(animationClass[j]), j);
									}
									if(counterTotal > animationClass.length - 1)
									{
										window.removeEventListener('scroll',arguments.callee,false);
									}
								}
							},
							false);
	
	SexyLightbox.initialize({color:'white', dir:'<?php echo $cfg_app_url ?>/js/sexylightbox/images'});
    $('.slideshow').cycle({
	fx: 'fade'
	});
});
</script>
</head>
<body>
<div id="pseudobg">
<div id="topfixed"></div>
<div id="fixed">
	<div id="header">
		<div id="headerblok1">
			<div id="logo">
				<a href="<?php echo $cfg_app_url ?>/?p=link&action=go&pid=3"><img src="<?php echo $cfg_app_url ?>/template/<?php echo $config_site_templatefolder?>/css/basic/images/logo.jpg" /></a>
			</div>
			<div id="logokiri">
				<img src="<?php echo $cfg_app_url ?>/template/<?php echo $config_site_templatefolder?>/css/basic/images/~logosci.jpg" />
			</div>
			<!--<div id="namalogo">
				<h1>Pt.sutindo chemical indonesia</h1>
			</div>-->
			<div class="blockatas">
				<!--<p>SUTINDO CHEMICAL INDONESIA <span class="grey">IS JOINT VENTURE OF</span> </p>
				<img src="images/joint.png" />
				<img src="images/logotoyota.png" />-->
			</div>
			<div id="menu">
				<?php echo $display_menu ?>
			</div>
		</div>
		<div id="headerblok2">
			<!--
			<img src="<?php echo $cfg_app_url ?>/template/<?php echo $config_site_templatefolder?>/css/basic/images/logosci.jpg" />
			<img src="<?php echo $cfg_app_url ?>/template/<?php echo $config_site_templatefolder?>/css/basic/images/bgslider.jpg" />
			-->
			<div id="capt_slider">
				<h1 class="blue1">&nbsp;</h1>
				<p class="blue2">&nbsp;</p>
				<!-- <a href="#" class="btn_orange">&nbsp;</a> -->		
				<a href="#">&nbsp;</a>
			</div>
			
			<div class="slide">
				<!--<div class="slidetas"></div>
				<div class="slidekiri"></div>
				<div class="slidekanan"></div>
				<div class="slidebawah"></div>-->
				<div id="slider">
					<?php echo $dekorasi[0]; ?>
					<?php echo $dekorasi[1]; ?>
					<?php echo $dekorasi[2]; ?> 
					<?php echo $dekorasi[3]; ?>
					<?php echo $dekorasi[4]; ?>
					<?php echo $dekorasi[5]; ?>
					<?php echo $dekorasi[6]; ?>
					<?php echo $dekorasi[7]; ?>
					<?php echo $dekorasi[8]; ?>
					<?php echo $dekorasi[9]; ?>
					<?php echo $dekorasi[10]; ?> 
					<?php echo $dekorasi[11]; ?>
					<?php echo $dekorasi[12]; ?>
					<?php echo $dekorasi[13]; ?>
					<?php echo $dekorasi[14]; ?>
					<?php echo $dekorasi[15]; ?>					
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<div id="headerblok3">
			<?php echo $dekorasiutama[0]; ?>
			<?php echo $dekorasiutama[1]; ?>
			<?php echo $dekorasiutama[2]; ?>
			<?php echo $dekorasiutama[3]; ?>
			<?php echo $dekorasiutama[4]; ?>
			<?php echo $dekorasiutama[5]; ?>
			<?php echo $dekorasiutama[6]; ?>			
		</div>
	</div>
	<div id="container">
			<div id="center" class="column">
				<div class="utama">
					<div id="utamablok1"></div>
					<div id="utamablok2">
						<!-- ini untuk dtampilkan di halaman home saja dengan 1 kolom, sedangkan halaman di dalamnya memakai 2 kolom -->
						<div class="breadcumb">
							<!--<p>CHEMICALS &nbsp;<img src="images/arrow.png" />&nbsp; <span class="orange">iNTEGRAL SKIN FOAM</span></p>by muby-->
						</div>
						<div class="blockatas">
							<img class="ukasvendo" src="images/UKAS-vendo.jpg" />
							<div class="sci-join">
								<p>SUTINDO CHEMICAL INDONESIA <span class="grey">IS JOINT VENTURE OF</span> </p>
								<img class="joint" src="images/joint.png" />
							</div>
							<!--<img src="images/logotoyota.png" />-->
						</div>
						<div id="content">
							<?php if($_GET['p']==''){ ?>
							<div class="blockhome">
								<div class="auto" id="home-image">
								</div>
								<?php echo $display_banner[0];?>
								<div class="blockcontenthome"><p>As a soft and safe material, the polyurethane high-resilience flexible foam is widely applied to the packed layers of automotive chairs and headrests and makes our automotives safer and more comfortable.</p></div>
							</div>
							<div class="blockhome">
								<div class="insulator" id="home-image">
								</div>
								<?php echo $display_banner[1];?>
								<div class="blockcontenthome"><p>Insulate your home's walls and ceiling to save money on energy, help to protect the environment and air sealant for both residential and commerical buildings. Lose your home from heat around.</p></div>
							</div>
							<div class="blockhome">
								<div class="homeapp" id="home-image">
								</div>
								<?php echo $display_banner[2];?>
								<div class="blockcontenthome"><p>Rigid polyurethane insulating foam makes a major contribution to sustainability and eco-design by reducing the energy required to keep refrigerators and freezers cold. It can cost lower energy bills.</p></div>
							</div>
							<div class="blockhome">
								<div class="othersapp" id="home-image">
								</div>
								<?php echo $display_banner[3];?>
								<div class="blockcontenthome"><p>Rigid polyurethane insulating foam makes a major contribution to sustainability and eco-design by reducing the energy required to keep refrigerators and freezers cold. It can cost lower energy bills.</p></div>
							</div>
						<?php }else{ ?>
							<?php echo $display_upper_sticky_block ?>
							<?php echo $display_main_content_block ?>
							<?php echo $display_lower_sticky_block ?>
						<?php } ?>
						</div>
					</div>
					<div id="utamablok3"></div>
				</div>
			</div>
			<!--<div id="left" class="column">
				<div class="sisia">
					<div id="sisiablok1">
						<?php echo $display_catalog_search ?>
					</div>
					<div id="sisiablok2">
						<?php echo $display_widget_A ?>
					</div>
					<div id="sisiablok3"></div>
				</div>
			</div>-->
		</div>
	<div id="footer">
		<div id="footerblok1"></div>
		<div id="footerblok2">
			<?php echo $display_footer ?>
			<div id="yahoo">
				<img src="<?php echo $cfg_app_url ?>/template/<?=$config_site_templatefolder?>/css/basic/images/yahoo.png" />
			</div>
			<div id="menubawah">
				<ul>
					<li><a href="#">Privacy Policy </a></li>
					<li><a href="#">Terms and Conditions</a></li>
				</ul>
			</div>
		</div>
		<div id="footerblok3"></div>
	</div>
</div>
<div id="bottomfixed"></div>
</div>
<?php echo $config_site_gacode ?>
</body>
</html>